<template>
  <van-nav-bar title="地址管理" :fixed="true" left-arrow @click-left="router.back()"/>
  <div v-if="data.hasAddress" class="noAddress">还没有地址信息，去添加吧！</div>
  <van-address-list
    v-model="data.list.id"
    :list="data.list"
    default-tag-text="默认"
    :switchable="false"
    @edit="onEdit"
    @add="onAdd"
    class="mt46"
  />
</template>
    
<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { addRessListApi } from '@/api/my'
import { InitAddressList } from '@/types/my'
  const router = useRouter()
  let data = reactive(new InitAddressList())

  let getAddressListData = async () => {
    let res = await addRessListApi()
    if(res.status === 200){
      for (const iterator of res.data.data) {
        let boo = iterator.is_default === 1 ? true : false
        iterator.isDefault = boo // 是否默认选中
        iterator.tel = iterator.phone // 手机号
        iterator.address = 
        iterator.province+' '+iterator.city+' '+iterator.county+' '+ iterator.address // 拼接地址
        data.list.push(iterator)
      }
      if(data.list.length === 0){
        data.hasAddress = true
      }
    }
  }
  // 编辑
  const onEdit = (item:any) => {
    router.push({path:'/address/update',query:{id:item.id}})
  }
  // 添加
  const onAdd = () => {
    router.push('/address/create')
  }

onMounted(() => {
  getAddressListData()
})
</script>
    
<style scoped lang="less">
.noAddress {
  margin-top: 200px;
  text-align: center;
  color: #2c3e50;
  font-size: 16px;
}
/deep/ .van-address-list__bottom {
  bottom: 50px;
}
/deep/ .van-button--danger {
    background-color: #1989fa !important;
    border-color: #1989fa;
}
</style>